<template>
  <div class="vpt-monitoring-panel">
    <div class="title">
      {{ title }}
    </div>
    <VptLine class="base-echart"
             autoRander
             v-bind="chartProps"
             :chartType="chartType"
             :color="color">
    </VptLine>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import VptLine from "@/components/echarts/vpt-line/index.vue";
import { fontSize } from "@/utils/rem/rem.js";

const props = defineProps({
  title: { type: String, default: "" },
  chartType: { type: String, default: "init" },
  chartData: { type: Array, default: () => [] },
  legendData: { type: Array, default: () => [] },
  monitoringData: { type: Array, default: () => [] },
  color: { type: Array, default: () => ["#2175DB", "#00B42A"] },
  chartOptions: {
    type: Object,
    default: () => {
      return {
        model: " 1",
        select: {
          width: 1,
          time: {
            labelWidth: "",
          },
          bns: {
            labelWidth: "",
          },
          scope: {
            labelWidth: "",
          },
        },
        grid: {
          top: 60,
          bottom: 0,
        },
        legendProps: {
          top: 12,
        },
      };
    },
  },
});

const data = computed(() => {
  return props.legendData.map((item) => {
    if (item.includes("内存") || item.includes("CPU")) {
      return props.chartData.map((v) => v.usage);
    } else {
      return props.chartData.map((v) => v.usage_avg);
    }
  });
});
const chartProps = computed(() => {
  // 横坐标数据
  const xData = props.chartData.map((v) => v.data_time);
  // const otherProps = props.isLandscape ? getHorvreenProps() : {};
  return {
    height: fontSize(180),
    chartTitle: "",
    grid: {
      top: fontSize(props.chartOptions.grid.top),
      bottom: fontSize(props.chartOptions.grid.bottom),
      right: fontSize(0),
      left: fontSize(0),
    },
    legendProps: {
      top: fontSize(props.chartOptions.legendProps.top),
    },
    legendData: props.legendData,
    chartData: data.value.length ? data.value : [],
    // splitNumber: 3,
    xAxisData: xData,
    dataZoom: {
      show: false,
      endValue: "auto",
    },
    xAxisFontSize: 14,
    yAxisFontSize: 14,
    // ...otherProps.value,
  };
});
</script>

<style lang="less" scoped>
.title {
  font-size: 0.14rem;
  color: #1D2129;
}
.vpt-monitoring-panel {
  // flex:1;
  width: 3.43rem;
  // max-width: 3.5rem;
  // min-width: 3.43rem;
  height: 1.9rem;
  padding: 0.16rem;
  background: #fff;
  border: 0.01rem solid #e6ebf5;
  margin-bottom: 0.16rem;
}
.base-echart {
  height: 6rem;
}
</style>
